<template>
  <div>
    <h1>分类</h1>
    <!-- vue 内置组件的过渡   -->
    <transition name="fade">
      <p v-if="flag"
         style="height: 200px; background:skyblue;">你好</p>
    </transition>
    <transition name="slide">
      <my-com v-if="flag"></my-com>
    </transition>
    <!-- 
      enter-active-class 进入动画
       leave-active-class 离开动画
     -->
    <transition enter-active-class="animated bounceIn"
                leave-active-class="animated bounceOutRight">
      <div v-if="flag"
           style="width:200px;height:200px;background:blue;"></div>
    </transition>
    <button @click="flag=!flag">点击切换</button>
  </div>
</template>

<script>

import myCom from './myCom'
export default {
  name: "category",
  components: {
    myCom
  },
  data () {
    return {
      flag: true
    }
  },
  // 组件内部的路由钩子函数
  beforeRouteEnter (to, from, next) {//进入本组件触发
    console.log(to)
    console.log(from)
    if (from.name == "cart") {
      alert("你从购物车组件跳转过来的")
    }
    // ...
    next()  //继续执行
  },
  beforeRouteLeave (to, from, next) {//离开组件触发
    // ...
    next()//继续执行
  }
};
</script>
<style lang="less">
.fade-enter-active {
  //组件或元素进入时的动画
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  //组件或元素准备进入和准备离开
  transition: opacity 1s;
  opacity: 0;
}
.slide-enter {
  //准备进入
  transition: all 1s;
  transform: translate(-500px);
}
.slide-enter-active {
  //进入过程中
  transition: all 1s;
  transform: translate(500px);
}
.slide-leave-active {
  //正在离开的过程
  transition: all 1s;
  transform: rotate(360deg);
}
</style>
